<template>
	<view>

		<view class="withdrawal_mode">
			<view class="withdrawal_name">选择提现方式:</view>
			<radio-group @change="radioChange" class="withdrawal_radio">
				<label class="radio_box weui-cell weui-check__label" v-for="item in items" :key="item.value">
					<view class="weui-cell__hd">
						<radio v-model="item.value" :checked="item.checked" color="#FF7133" />
					</view>
					<view class="weui-cell__bd">{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view class="fullName">
			<view class="withdrawal_name">真实姓名:</view>
			<input type="text" placeholder="请输入真实姓名" v-model="form.info.name"></input>
		</view>
		<view class="fullName" @click="toChoicecard" v-if="form.typedata==2">
			<view class="withdrawal_name">k:</view>
			<view class="bank_card">

				<view v-if="form.info.card">
					<text v-for="(item,index) in 4" :key="index">****</text>
					<text>{{form.info.card.substring(16)}}</text>
				</view>
				<view v-else> </view>
				<text class="iconfont iconfanhui t-180 white-font"></text>
			</view>
		</view>
		<view v-else class="fullName">
			<view class="withdrawal_name">zh:</view>
			<input type="text" placeholder="请输入zh" v-model="form.info.card"></input>
		</view>
		<view class="withdrawal_block">
			<view class="withdrawal_name">提现金额：</view>
			<view class="withdrawal_price">
				<view>￥</view>
				<input type="number" placeholder="请输入提现金额" v-model="form.money"></input>
			</view>
			<view class="withdrawal_desc">
				<view>我的余额{{userInfo.commission}}元</view>
				<text @click="all">全部提现</text>
			</view>
		</view>
		<view class="withdrawal_btn" @click="withdrawal">提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '1',
						checked: 'true'
					},
					{
						value: '2',
						name: '2'
					}
				],
				userInfo: {},
				form: {
					money: '',
					typedata: 1,
					info: {
						name: '',
						card: ''
					}
				}
			}
		},
		methods: {
			toChoicecard() {
				uni.navigateTo({
					url: 'bankCardList'
				})
			},
			radioChange(e) {
				this.form.typedata = e.detail.value;
			this.form.info.card='';
			},
			all() {
				this.form.money = this.userInfo.commission;
			},
			withdrawal() {
				console.log(this.form)
				let {
					form
				} = this;
				if (!form.info.name) {
					return this.$Toast('请填写真实姓名');
				}
				if (form.typedata == 1 && !form.info.card) {
					return this.$Toast('请填写微信号');
				}
				if (form.typedata == 2 && !form.info.card) {
					return this.$Toast('请选择银行卡号');
				}
				if (form.money <= 0) {
					return this.$Toast('请输入提现金额');
				}
				if (form.money > this.userInfo.commission) {
					return this.$Toast('可提现金额不能超过余额');
				}
				this.$post(this.$api.wAdd, this.form, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.$Toast('申请提现成功,请耐心等待审核');
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.$Toast(data.msg);
					}
				})
			}
		},
		onLoad() {
			let _ = this;
			_.$get(_.$api.userInfo, {}, (res) => {
				let {
					data
				} = res;
				if (data.code == 1) {
					_.userInfo = data.data;
				}
			})
		},
		onShow() {
			console.log(uni.getStorageSync('bankCard'))
			if (this.form.typedata == 2 && uni.getStorageSync('bankCard')) {
				this.form.info.card = uni.getStorageSync('bankCard')
			}
		}
	}
</script>

<style scoped>
	.withdrawal_btn {
		width: 640rpx;
		height: 90rpx;
		background: #FF7133;
		border-radius: 45rpx;
		margin: 200rpx auto 0;
		text-align: center;
		line-height: 90rpx;
		font-size: 36rpx;
		color: white;
	}

	.bank_card {
		display: flex;
		align-items: center;
	}

	.bank_card view {
		font-size: 26rpx;
		color: #999999;
	}

	.bank_card text {
		font-size: 26rpx;
		color: #999999;
	}

	.withdrawal_desc {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.withdrawal_desc view {
		font-size: 26rpx;
		color: #333333;
		margin-right: 30rpx;
	}

	.withdrawal_desc text {
		font-size: 26rpx;
		color: #FF0000;
	}

	.withdrawal_block {
		background: #fff;
		padding: 30rpx;
	}

	.withdrawal_price {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #eee;
	}

	.withdrawal_price view {
		font-size: 72rpx;
		color: #333333;
	}

	.withdrawal_price input {
		font-size: 30rpx;
		/* color: #999999; */
	}

	.fullName {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 30rpx;
		margin: 16rpx 0;
	}

	.fullName input {
		font-size: 26rpx;
		color: #999999;
		text-align: right;
	}

	.withdrawal_mode {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 40rpx 30rpx 30rpx;
	}

	.withdrawal_name {
		font-size: 30rpx;
		color: #333333;
		margin-right: 60rpx;
	}

	.withdrawal_radio {
		display: flex;
		align-items: center;
	}

	.radio_box {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}

	page {
		background: #F8F8F8;
	}
</style>
